<template>
  <div>
    <div v-if="show" class="table">
      <div class="text" @click="handelClick(1)"><div :class="active == 1 ? 'active' :''">资产类型管理</div></div>
      <div class="text" @click="handelClick(2)"><div :class="active == 2 ? 'active' :''">位置管理</div></div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active:1,
      show:true, // 选择是否显示
      whiteList: ['/manage/class','/manage/placeManage']
    };
  },
  watch: {
    $route(to, from) {
      // console.log(this.$route.path);
      if( this.whiteList.includes(this.$route.path) ){

        this.show = true
      }else{
        this.show = false
      }
    },
    immediate: true,
  },
  created() {
    if(this.$route.path == '/manage/class') this.active = 1
    if(this.$route.path == '/manage/placeManage') this.active = 2
  },
  methods:{
    handelClick(index){
      if(index == this.active) return
      this.active = index
      if(index == 2)this.$router.push({name: "placeManage",})
      if(index == 1)this.$router.push("class")
      
    }
  }
}
</script>

<style lang="less" scoped>
.table{
  height: 50px;
  background-color: #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .text{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .active{
    color: #3a75c5;
    padding: 10px 0;
    border-bottom: 2px solid #3a75c5;
  }
}
</style>